﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <script type="text/javascript" src="/Scripts/require.js"></script>
    <script type="text/javascript" src="/Scripts/route.js"></script>
</head>
<body>
    <script type="text/javascript">
        loadFile_CSS_Link([
            ToResourceURL(1, "/Styles/base.css"),
        ]);
        require([
            ToResourceURL(1, "/Scripts/jquery-2.2.4.min.js"),
            "IIconSVG",
        ], function (r1, ScriptTool_iconsvg) {
            $(function () {
                var box = $(".list");
                var svg_names = [
                    "box-solid.svg",
                    "circle-xmark-solid.svg",
                    "edit-solid.svg",
                    "rotate-solid.svg",
                    "truck-solid.svg",
                    "angles-right-solid.svg",
                    "circle-check.svg",
                    "flag-solid.svg",
                    "plus-solid.svg",
                    "right-left-solid.svg",
                    "star-solid.svg",
                    "xmark-solid.svg",
                    "list.svg",
                    "points.svg",
                    "complate.svg",
                    "arrow.svg",
                ];

                function toEl_i(str) {
                    var i = $(document.createElement('i'));
                    i.text(str);
                    return i;
                }
                for (let index = 0; index < svg_names.length; index++) {
                    var svg = svg_names[index];
                    var div = $(document.createElement('div'));
                    div.addClass('item iconsvg');
                    if (index == 1) {
                        div.addClass("haveColor");
                    }

                    var url = ToResourceURL(1, `/Projects/Icons/svgs/${svg}`);
                    div.attr('src', url);

                    var btn = $(document.createElement('button'));
                    btn.text(svg);
                    btn.addClass('btn');
                    btn.on("click", function() {
                        $(this).parents(".item.iconsvg").toggleClass("hover");
                    });
                    div.append(btn);

                    var i_list = $(document.createElement('div'));
                    i_list.addClass('links');
                    i_list.append(toEl_i(url));
                    i_list.append(toEl_i(`ToResourceURL(1, "/Projects/Icons/svgs/${svg})"`));
                    i_list.append(toEl_i(`<div class="iconsvg" data-resourceid="1" src="/Projects/icons/svgs/${svg}"></div>`));

                    div.append(i_list);
                    box.append(div);
                }

                var type = ScriptTool_iconsvg.default;
                let iconsvg = new type().GetCase();
                iconsvg.onload(box);
            });
        });
    </script>

    <style type="text/css">
        * {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .list {
            display: flex;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;
            padding: 2em;
        }

        .list .item {
            background-color: #fff;
            box-shadow: 0 0 4px #000;
            width: auto;
            height: auto;
            text-align: left;
            margin-right: .9em;
            margin-bottom: .9em;
            padding: .5em;
            flex-direction: row;
            font-size: 1.3em;
            align-items: center;
            display: flex;
            align-items: center;
        }
        .list .item.haveColor {
            color: red;
        }

        .list .item .svg {
            display: inline-block;
            font-size: 2em;
            width: 1em;
            overflow: unset;
            border: 1px solid #000;
        }


        .list .item .btn,
        .list .item i {
            display: inline-block;
            font-size: 1em;
            margin-left: 1em;

            height: auto;
            font-style: unset;
            font-family: Consolas;
        }
        .list .item i {
            padding: .4em 0;
            -webkit-user-select: all;
            -moz-user-select: all;
            -ms-user-select: all;
            user-select: all;
        }
        .list .item .btn {
            box-shadow: 0 0 4px #f5c3b0;
            background-color: #f5c3b0;
            border: unset;
            color: inherit;
            padding: .2em;
        }
        .list .item .btn:hover {
            cursor: pointer;
        }

        .list .item .links {
            display: none;
            align-items: flex-start;
            flex-direction: column;
        }
        .list .item.hover {
            width: 100vw;
        }
        .list .item.hover .links {
            display: flex;
        }
        .list .item.hover .links i + i {
            border-top: 1px dotted #858585;
        }
    </style>

    <div class="list">
        <!-- <div class="item iconsvg" src="./circle-check.svg"><i>circle-check.svg</i></div> -->
    </div>
</body>
</html>

<!--
http://localhost:7466/asserts/icons/svgs/_show.html
([\w\-\_]+)\.svg\s+
$1.svg\n
-->
